<template>
  <el-container>
    <el-header style="border-bottom: 1px solid rgba(255,255,255,0.12)">
      <p style="font-family: MicrosoftYaHei;font-size: 16px;color: #7DDAFF;">停车场信息</p>
    </el-header>
    <el-main>
      <el-row class="btn-group">
        <el-button class="btn" @click="handleDownloadParkInfo">
          <span>导出</span><i class="el-icon-download"></i>
        </el-button>
      </el-row>

      <el-table :data="dataList" v-loading="listLoading" element-loading-text="给我一点时间"
                :row-class-name="tableRowClassName"
                height="500"
                element-loading-background="rgba(0, 0, 0, .3)"
                style="width: 100%;padding-top: 0px;background-color: #1B4685" ref="parkInfoTable">
        <el-table-column fixed sortable align="center" label="车场名称" prop="parkName">
          <template slot-scope="scope">
            <span>{{scope.row.parkName}}</span>
          </template>
        </el-table-column>
        <!--<el-table-column  sortable align="center" label="车场编号" prop="parkno" width="150">-->
          <!--<template slot-scope="scope">-->
            <!--<span>{{scope.row.parkno}}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->

        <el-table-column align="center" label="停车泊位数" sortable prop="placeNum">
          <template slot-scope="scope">
            <span>{{scope.row.placeNum}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="经营单位" sortable prop="businessUnit">
          <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="道路类型" show-overflow-tooltip sortable prop="headPhone">
          <template slot-scope="scope">
            <span v-if="scope.row.inOutRoad === 1">路内</span>
            <span v-else>路外</span>
          </template>
        </el-table-column>
        <!--<el-table-column align="center" label="企业信用代码" sortable prop="creditCode" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.creditCode}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="设备厂商" sortable prop="equipmentVender" width="150">
          <template slot-scope="scope">
            <span>{{scope.row.equipmentVender}}</span>
          </template>
        </el-table-column>-->
        <!--<el-table-column align="center" label="剩余泊位数" sortable prop="head" width="150">-->
          <!--<template slot-scope="scope">-->
            <!--<span>{{scope.row.head}}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column align="center" label="负责人" sortable prop="head">
          <template slot-scope="scope">
            <span>{{scope.row.linkMan}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="负责人联系方式" show-overflow-tooltip sortable prop="headPhone">
          <template slot-scope="scope">
            <span>{{scope.row.tel}}</span>
          </template>
        </el-table-column>
        <!--<el-table-column align="center" label="位置" show-overflow-tooltip sortable prop="location" width="200">-->
          <!--<template slot-scope="scope">-->
            <!--<span>{{scope.row.location}}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <!--<el-table-column align="center" label="收费标准描述" show-overflow-tooltip sortable prop="chargingStandard" width="200">-->
          <!--<template slot-scope="scope">-->
            <!--<span>{{scope.row.chargingStandard}}</span>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column fixed="right" align="center" label="操作">
          <template slot-scope="scope">
                <span class="btn-group" >
            <el-button class="four-btn" style=" margin-bottom: 0px"
                       @click="handleDetail(scope.row)"><span>详细信息</span><i class="el-icon-edit-outline"></i>
            </el-button>
                </span>
          </template>
        </el-table-column>
      </el-table>

    </el-main>
    <el-footer>
      <el-pagination style="margin-top: 16px" background
                     @size-change="handleSizeChangeParkInfo"
                     @current-change="handleCurrentChangeParkInfo"
                     :current-page="listQuery.page"
                     :page-sizes="[10,20,30, 50]"
                     :page-size="listQuery.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-footer>
    <el-dialog title="详细信息" :visible.sync="detailVisible" center width="520px">
      <div style="height: 320px;padding-top: 21.7px">
        <el-row style="text-align: left;padding-left: 56px;;margin-bottom: 20px;">
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #9ea6c2;margin-right: 70px;">停车场名称:</span>
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #FFFFFF;">{{tempParkInfo.parkName}}</span>
        </el-row>
        <el-row style="text-align: left;padding-left: 56px;;margin-bottom: 20px;">
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #9ea6c2;margin-right: 45px;">对方停车场编号:</span>
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #FFFFFF">{{tempParkInfo.otherParkNo}}</span>
        </el-row>
        <el-row style="text-align: left;padding-left: 56px;;margin-bottom: 20px;">
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #9ea6c2;margin-right: 45px;">我方停车场编号:</span>
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #FFFFFF">{{tempParkInfo.ourParkNo}}</span>
        </el-row>
        <el-row style="text-align: left;padding-left: 56px;;margin-bottom: 20px;">
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #9ea6c2;margin-right: 85px;">对接时间:</span>
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #FFFFFF">{{tempParkInfo.joinTime}}</span>
        </el-row>
        <el-row style="text-align: left;padding-left: 56px;;margin-bottom: 20px;">
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #9ea6c2;margin-right: 33px;">开始上传数据时间:</span>
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #FFFFFF">{{tempParkInfo.startUploadTime}}</span>
        </el-row>
        <el-row style="text-align: left;padding-left: 56px;;margin-bottom: 20px;margin-right: 63px;" v-if="tempParkInfo.head === 1">
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #9ea6c2;">上传数据类型:</span>
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #FFFFFF">复选框停车流水</span>
        </el-row>
        <el-row style="text-align: left;padding-left: 56px;;margin-bottom: 20px;" v-else>
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #9ea6c2;margin-right: 61px;">上传数据类型:</span>
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #FFFFFF">剩余泊位数</span>
        </el-row>
        <el-row style="text-align: left;padding-left: 56px;;margin-bottom: 20px;">
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #9ea6c2;margin-right: 103px;">appid:</span>
          <span style="font-family: MicrosoftYaHei;font-size: 13px;color: #FFFFFF">{{tempParkInfo.appid}}</span>
        </el-row>
      </div>
      <!--<p>停车场名称:{{tempParkInfo.parkName}}</p>
      <p>对方停车场编号:{{tempParkInfo.otherParkNo}}</p>
      <p>我方停车场编号:{{tempParkInfo.ourParkNo}}</p>
          <p>对接时间:{{tempParkInfo.joinTime}}</p>
          &lt;!&ndash;<el-input clearable readonly v-model="" readonly></el-input>&ndash;&gt;
          <p>开始上传数据时间:{{tempParkInfo.startUploadTime}}</p>
     &lt;!&ndash; <p>企业信用代码:{{tempParkInfo.creditCode}}</p>
      <p>设备厂商:{{tempParkInfo.equipmentVender}}</p>&ndash;&gt;
      <p v-if="tempParkInfo.head === 1">上传数据类型:复选框停车流水</p>
      <p v-else>上传数据类型:剩余泊位数</p>
      <p>appid:{{tempParkInfo.appid}}</p>-->
          <!--<el-input clearable readonly v-model="tempParkInfo.location" readonly></el-input>-->
        <!--<p>接入类型:{{tempParkInfo.type}}</p>
          <p>收费标准描述:{{tempParkInfo.chargingStandard}}</p>-->
          <!--<el-input clearable type="textarea" v-model="tempParkInfo.chargingStandard" :autosize="{ minRows: 2, maxRows: 4}"  readonly></el-input>-->
    </el-dialog>
  </el-container>
</template>

<script>
  /* eslint-disable */
  export default {
    name: "park-info-table",
    props: ['searchList', 'listLoadingParkInfo'],
    watch: {
      searchList(val) {
        this.dataList = val.list
        this.total = val.count
      },
      listLoadingParkInfo(val) {
        this.listLoading = val
      }
    },
    data() {
      return {
        listLoading: false,
        detailVisible: false,
        dataList: [],
        total: 0,
        listQuery: {
          page: 1,
          limit: 20
        },
        tempParkInfo: {

        },

      }
    },
    methods:{
      handleDownloadParkInfo(){
      },
      handleSizeChangeParkInfo(val) {
        this.listQuery.limit = val
        this.$emit("handleSizeChangeParkInfo",val)
      },
      handleCurrentChangeParkInfo(val) {
        this.listQuery.page = val
        this.$emit("handleCurrentChangeParkInfo",val)
      },
      handleDetail(row){
      this.tempParkInfo=row
        this.detailVisible=true
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 0) {
          return 'one-row';
        } else {
          return '';
        }
      }

    }
  }
</script>

<style scoped>
  .btn-group > .el-button span{
    display: none;
  }
  .btn-group > .el-button:hover{
    background-color: #409EFF;
  }
  .btn-group > .el-button:hover span{
    display: block;
  }
  .btn-group > .el-button:hover i{
    display: none;
  }

</style>
